{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="{% static 'plugin/bootstrap-3.4.1-dist/css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/app_index.css' %}">
    <link rel="icon" href="{% static 'ico/favicon.ico' %}">
</head>
<body>
  <div class="container">
    <div>
    <div class="navbar-header">
    <div class="navbar-collapse"><a class="navbar-brand" href="#" style="font-size:38px">陶陶涵</a></div>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="margin-top:10px">
        <ul class="nav navbar-nav">
        <li><a href="#" id="myHome">我的<span class="sr-only">(current)</span></a></li>
        <li><a href="#" id="articleSquare">帖子广场</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
            <label style="padding: 0;margin: 0">
                <input type="text" class="form-control" placeholder="输入您的内容" style="width: 320px">
            </label>
        </div>
        <button type="submit" class="btn btn-default" style="font-weight: bold">搜索</button>
      </form>

      <ul class="nav navbar-nav navbar-right">
          <li><a href="{% url 'account:login' %}" style="padding:8px" class="afterLogin"><button class="btn btn-primary">登录</button></a></li>
          </ul>
        </div>
    </div>
            <div id="cit">
             <div id="banner">
                <div id="content">
                <ul id="ul">
                <li><a href="###"><img src="../../static/img/index/001.jpeg" /></a> </li>
                <li><a href="###"><img src="../../static/img/index/002.jpeg" /></a> </li>
                <li><a href="###"><img src="../../static/img/index/001.jpeg" /></a> </li>
                <li><a href="###"><img src="../../static/img/index/002.jpeg" /></a> </li>
                <li><a href="###"><img src="../../static/img/index/001.jpeg" /></a> </li>
                <li><a href="###"><img src="../../static/img/index/002.jpeg" /></a> </li>
                <li><a href="###"><img src="../../static/img/index/001.jpeg" /></a> </li>
                <li><a href="###"><img src="../../static/img/index/002.jpeg" /></a> </li>
                <li><a href="###"><img src="../../static/img/index/001.jpeg" /></a> </li>
                <li><a href="###"><img src="../../static/img/index/002.jpeg" /></a> </li>
                </ul>
                <div class="dot" id="dot">
                    <ul id="dotul">
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
                </div>
                <div id="btn">
                    <div id="left" class="b"><img src="{% static 'img/index/zuo.png' %}"/></div>
                    <div id="right" class="b"><img src="{% static 'img/index/you.png' %}"/></div>
                </div>
                </div>
            </div>
            <div id="bt">
				<i style="color:white; font-family:华文彩云,sans-serif;font-size: 80px;background:none">在这里</i>
				<h1 style="color: white; font-size: 40px;font-family: 华文行楷,sans-serif">有志同道合的小伙伴们</h1>
			</div>
			<div class="PageBody"><!--页面主体-->
						<div class="im"><img src="{% static 'img/appIndex/home1.jpg' %}" /></div>
						<div class="im"><img src="{% static 'img/appIndex/home2.jpg' %}" /></div>
						<div class="im"><img src="{% static 'img/appIndex/home3.jpg' %}" /></div>
						<div class="im"><img src="{% static 'img/appIndex/home4.jpg' %}" /></div>
						<div class="im"><img src="{% static 'img/appIndex/home5.jpg' %}" /></div>
						<div class="im"><img src="{% static 'img/appIndex/home6.jpg' %}" /></div>
						<div class="im"><img src="{% static 'img/appIndex/home7.jpg' %}" /></div>
						<div class="im"><img src="{% static 'img/appIndex/home8.jpg' %}" /></div>
						<div class="im"><img src="{% static 'img/appIndex/home9.jpg' %}" /></div>
						<div class="im"><img src="{% static 'img/index/001.jpeg' %}" /></div>
						<div class="im"><img src="{% static 'img/index/002.jpeg' %}" /></div>
						<div class="im"><img src="{% static 'img/index/001.jpeg' %}" /></div>
			</div>
			<div id="xr">
				<h2 style="color: white;">分享快乐，寄托想念</h2>
				<h3 style="color: white;">内置游戏渲染引擎，真实还原雨雪光特效和各种粒子效果，让动态壁纸效果栩栩如真</h3>
				<h3 style="color: white;">每张壁纸内置专属背景音和鼠标效果，为你打造桌面壁纸的绝美盛宴</h3>
				<div class="videos">
					<video class="video-source" autoplay loop muted controls>
						<source src="{% static 'video/video.mp4' %}" type="video/mp4">
					</video>
					<video class="video-source" autoplay loop muted controls>
						<source src="{% static 'video/video.mp4' %}" type="video/mp4">
					</video>
				</div>
			</div>
            {% include 'footer.html' %}
  </div>
<script src="{% static 'js/app/lunbo.js' %}"></script>
<script src="{% static 'js/jquery/jquery-3.5.1.js' %}"></script>
<script src="{% static 'plugin/bootstrap-3.4.1-dist/js/bootstrap.min.js' %}"></script>
<script type="text/javascript">
    var user = '{{ request.user }}';
    var $loginBtn = $('.afterLogin');
    $(function (){
        if(user !== 'AnonymousUser'){
            $loginBtn.children().each(function (){$(this).remove();})
            $loginBtn.text(user);
            $loginBtn.attr({
                // 个人主页
                'href':'{% url 'account:index' %}',
            });
            $('#myHome').attr('href','{% url 'article:article_column' %}');
            $('#articleSquare').attr('href','{% url 'article:article_square' %}');
            var elseItems = '<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" id="elseItems">其他<span class="caret"></span></a> <ul class="dropdown-menu"> <li style="font-size: medium"><a href="#">个人资料</a></li> <li style="font-size: medium"><a href="{% url 'article:user_articles' %}">我的发布</a></li> <li style="font-size: medium"><a href="#">我的收藏</a></li> <li style="font-size: medium"><a href="{% url 'task:show_task' %}">任务清单</a></li> <li role="separator" class="divider" style="margin: 3px"></li> <li style="font-size: medium"><a href="{% url 'account:logout' %}"><button type="button" class="btn btn-sm btn-primary">注销</button></a></li> </ul> </li>';
            $('.navbar-right').append(elseItems);
            var $elseItems = $('#elseItems');
            $loginBtn.css({
                'color':"rgba(110, 211, 117, 0.5)",
                'padding':'15px',
            });
            $elseItems.css({
                'color':"rgba(110, 211, 117, 0.5)",
            });
            function before(){
                $(this).css({
                    'background':'rgba(200,222,139,0.8)',
                    'color':'red',
                })
            }
            function after(){
                $(this).css({
                    'background':'',
                    'color':'',
                });
                $loginBtn.css({
                'color':"rgba(110, 211, 117, 0.5)",
                });
                $elseItems.css({
                'color':"rgba(110, 211, 117, 0.5)",
                });
            }
            $('a').hover(before,after);
        }else{
            $("a:not(.afterLogin)").click(function (){
                alert('请登录后重试！');
            })
        }
    })
</script>
</body>
</html>